<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style>
		.red {
			width: 16px;
			height: 16px;
			background-color: green;
		}
	</style>
</head>
<body>
 	<div class="red">hahh </div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		// 一起
		// $('.red').animate({
		// 	width: "100px",
		// 	height:"100px",
		// 	fontSize: '35px'
		// }, 3000)
		// 分开
		// $('.red').animate({
		// 	width: '100px'
		// },1000).animate({
		// 	height: '200px'
		// }, 2000).animate({
		// 	fontSize: '35px'
		// },1000)
		// hover
		// stop() 清空之前的animate队列,重新排队
		$('.red').hover(function(){
			$(this).stop().animate({
				width: '200px',
				height: '200px',
				borderRadius: '50%'
			}, 1000)
		},function(){
			$(this).stop().animate({
				width: '16px',
				height: '16px',
				borderRadius: '0'
			}, 1000)
		})



	</script>
</body>
</html>